import React, { Component } from 'react'
import Item from '../Item'
import './index.css'

export default class List extends Component {
  render() {
    const { list, isLoading, isFirst, errInfo } = this.props
    // 笨拙写法
    // if (isFirst) {
    //   return <div>欢迎来到当前组件</div>
    // } else if (isLoading) {
    //   return <div>Loading...</div>
    // } else if (errInfo) {
    //   return <div>网络错误，小主稍后再试吧</div>
    // } else if (!list.length) {
    //   return <div>数据为空，换个搜索词试试吧</div>
    // } else {
    //   return (
    //     <div className="list-box">
    //       {list.map((item) => (
    //         <Item key={item.id} {...item} />
    //       ))}
    //     </div>
    //   )
    // }
    return (
      <div>
        {isFirst ? (
          <div>欢迎来到当前组件</div>
        ) : isLoading ? (
          <div>Loading...</div>
        ) : errInfo ? (
          <div>网络错误，小主稍后再试吧</div>
        ) : !list.length ? (
          <div>数据为空，换个搜索词试试吧</div>
        ) : (
          <div className="list-box">
            {list.map((item) => (
              <Item key={item.id} {...item} />
            ))}
          </div>
        )}
      </div>
    )
  }
}
